<template>
  <header class="flex flex-between">
    <div class="logo flex">
      <img src="@/assets/icon/logo.png" alt="">
      <p>xx-UI</p>
    </div>
    <ul class="nav flex">
      <li><input type="text" placeholder="搜索文档"></li>
      <li><a href="#">指南</a></li>
      <li><a href="#">组件</a></li>
      <li><a href="#">主题</a></li>
      <li><a href="#">资源</a></li>
      <li>v 0.0.1</li>
    </ul>
  </header>
</template>

<script>
export default {
  name: "headerMenu"
}
</script>

<style scoped>
header{
  box-sizing: border-box;
  height: 80px;
  line-height: 80px;
  /*background-color: skyblue;*/
  border-bottom: 1px solid #dcdfe6;
}
.logo{
  align-items: center;
}
.logo img{
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.logo p{
  font-size: 20px;
  font-weight: 600;
}
.nav{
}
.nav li{
  min-width: 80px;
  text-align: center;
}


input{
  padding: 5px 10px;
  outline: none;
  border: 1px solid #dcdfe6;
}
input:hover{
  box-shadow: 0 0 8px rgba(232,237,250,.6);
  transition: .2s;
}
</style>